﻿<AutoComplete @bind-Value="@value" Options="options" CompareWith="CompareWith" OnSelectionChange="OnSelectionChange">
    <OptionTemplate Context="option">
        <AutoCompleteOption Value="@option.Value" Label="@option.Label">
        </AutoCompleteOption>
    </OptionTemplate>
</AutoComplete>
<Divider></Divider>
<span>bind-Value:@value</span>
<br />
<span>SelectedValue:@(System.Text.Json.JsonSerializer.Serialize(selectItem?.Value))</span>

@code
{
    private string value;

    ObjectValueOption[] options = new ObjectValueOption[] {
                                    new ObjectValueOption()   { label= "Lucy", value= "lucy", age= 20 },
                                    new ObjectValueOption()  { label= "Jack", value= "jack", age= 22 },
                                    };


    Func<object, object, bool> CompareWith = (a, b) =>
    {
        if (a is ObjectValueOption o1 && b is ObjectValueOption o2)
        {
            return o1.value == o2.value;
        }
        else
        {
            return false;
        }
    };

    private AutoCompleteOption selectItem;

    void OnSelectionChange(AutoCompleteOption item)
    {
        selectItem = item;
    }

    public class ObjectValueOption
    {
        public string label { get; set; }
        public string value { get; set; }
        public int age { get; set; }

        public override string ToString()
        {
            return $"{label}-{age}";
        }
    }
}